<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<!-- <meta content="width=device-width" name="viewport" /> -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
		name="viewport" />
	<link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
	<title>浙江省数字教材服务平台</title>
	<div id="app"></div>
	<script src="script.js" type="module"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		#app {
			width: 100%;
			height: 100%;
		}

		.landscape {
			/* width: 100vw;
			height: 100vh; */
			/* transform: none;
			transform-origin: 0% 0%; */
		}

		.portrait {
			/* width: 100vh;
			height: 100vw; */

			transform: rotate(90deg);
			transform-origin: 0% 0%;

			position: absolute;
			left: 100%;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<script>
		(function () {
			// var supportOrientation = (typeof window.orientation === 'number' &&
			// 	typeof window.onorientationchange === 'object');

			var supportOrientation = false;

			var init = function () {
				var bodyNode = document.body,
					orientation;
				var htmlNode = document.body.parentNode,
					orientation;
				var updateOrientation = function () {
					if (supportOrientation) {
						orientation = window.orientation;
						switch (orientation) {
							case 90:
							case -90:
								orientation = 'landscape';
								break;
							default:
								orientation = 'portrait';
								break;
						}
					} else {
						orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
					}
					bodyNode.setAttribute('class', orientation);
					window.myOrientation = orientation;

					let width = 0;
					let height = 0;
					if (orientation == 'landscape') {
						width = window.innerWidth;
						height = window.innerHeight;
					} else {
						width = window.innerHeight;
						height = window.innerWidth;
					}

					bodyNode.style.width = width + 'px';
					bodyNode.style.height = height + 'px';

					htmlNode.style.fontSize = width / 80 + 'px';
				};

				if (supportOrientation) {
					window.addEventListener('orientationchange', updateOrientation, false);
				} else {
					//监听resize事件
					window.addEventListener('resize', updateOrientation, false);
				}

				updateOrientation();
			};

			window.addEventListener('DOMContentLoaded', init, false);

		})();
	</script>

	<script>
		// (function () {
		// 	document.addEventListener('contextmenu', function (event) {
		// 		event.preventDefault();
		// 	});

		// 	//禁止F12
		// 	document.addEventListener('keydown', function (event) {
		// 		if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
		// 			event.preventDefault();
		// 		}
		// 	});
		// 	//禁止键盘F12键和Ctrl + Shift + I组合键
		// 	document.addEventListener('keydown', function (e) {
		// 		if (e.key == 'F12') {
		// 			e.preventDefault();
		// 		}
		// 	});
		// })();

	</script>
</body>

</html>
